<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>div边框属性</title>

        <style>
            .first{
                width: 0;
                height: 0;
                margin:0 auto;
                margin-bottom: 10px;
            }
            .first-border{
                border-left: 100px solid blue;
                border-right: 100px solid red;
                border-top: 100px solid gray;
                border-bottom: 100px solid yellow;
            }

            .second-border{
                border-left: 200px solid red;
                border-bottom: 200px solid green;
            }

            .three-border{
                border-left: 100px solid blue;
                border-top: 100px solid transparent;
                border-bottom: 100px solid transparent;
            }


        </style>

    </head>
    <body>

    <div class="first first-border"></div>
    <div class="first second-border"></div>
    <div class="first three-border"></div>

    </body>
</html>